<template>
  <div class="input-box px-16 flex align-center gc-4 py-8">
    <img width="24" :src="speechPng" />
    <input v-model="msg" type="text" class="w-100" />
    <img width="24" :src="facePng" @click="messageAction.emoji" />
    <img v-if="!msg" width="24" :src="plusPng" @click="messageAction.plus" />
    <div v-else class="send" @click="send">
      <button>发送</button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import speechPng from '@/assets/images/speech.png';
  import facePng from '@/assets/images/face.png';
  import plusPng from '@/assets/images/plus.png';
  import { ref } from 'vue';
  import { getAvatar, getUserStore } from '@/store/user/utils';
  import { currentMessage, messageAction } from '../message';

  const msg = ref();

  const send = () => {
    if (!msg.value || !currentMessage.value) return;
    currentMessage.value.messageList.push({
      username: '',
      msg: JSON.parse(JSON.stringify(msg.value)),
      avatar: getAvatar(),
      from: 'sent',
      msgType: 'image',
      id: '',
      showTime: false,
      time: '',
    });
    msg.value = '';
  };
</script>

<style lang="scss" scoped>
  .input-box {
    $hh: 28px;
    position: sticky;
    bottom: 0;
    background-color: #f7f7f7;
    input {
      width: 100%;
      height: $hh;
      padding: 0 12px;
    }
    .send {
      white-space: nowrap;
      background-color: var(--primary);
      color: white;
      height: $hh;
      line-height: $hh;
      padding: 0 12px;
      border-radius: 4px;

      button {
        font-weight: bold;
      }
    }
  }
</style>
